<!--合伙人奖金页面-->
<template>
  <div>
    <div class="section_wrap" style="padding-bottom:5px">
      <el-form
        ref="formInline"
        :inline="true"
        :model="formInline"
        class="top query_wrap clearfix"
        style="text-align: left"
        label-width="90px"
      >
        <el-form-item label="关键词:" prop="keyWord">
          <el-input
            v-model="formInline.keyWord"
            placeholder="用户姓名、身份证号、电话等"
          ></el-input>
        </el-form-item>
        <el-form-item label="收入月:" prop="incomeMonth">
          <el-date-picker
            v-model="formInline.incomeMonth"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <div class="ts_wrap">
          <el-form-item label="团队人数:" prop="beginTeamNum" class="min">
            <el-input
              v-model="formInline.beginTeamNum"
              placeholder="团队人数最小"
            ></el-input>
          </el-form-item>
          <span class="span">至</span>
          <el-form-item prop="endTeamNum" class="min">
            <el-input
              v-model="formInline.endTeamNum"
              placeholder="团队人数最大"
            ></el-input>
          </el-form-item>
        </div>
        <div class="ts_wrap">
          <el-form-item label="带单量:" prop="beginValidNum" class="min">
            <el-input
              v-model="formInline.beginValidNum"
              placeholder="带单量最小"
            ></el-input>
          </el-form-item>
          <span class="span">至</span>
          <el-form-item prop="endValidNum" class="min">
            <el-input
              v-model="formInline.endValidNum"
              placeholder="带单量最大"
            ></el-input>
          </el-form-item>
        </div>
        <el-form-item label="最近登录" prop="loginTime">
          <el-date-picker
            v-model="formInline.loginTime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="所属公司:" prop="firmId">
          <el-select
            v-model="formInline.firmId"
            placeholder="请选择"
            @change="companyChange"
            popper-class="selectBox"
          >
            <el-option
              v-for="item in companyData"
              :key="item.id"
              :label="item.companyName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属部门:" prop="deptId">
          <treeselect
            :options="deptData"
            :clearable="false"
            v-model="formInline.deptId"
            :normalizer="normalizer"
            @select="handleNodeClick"
            placeholder="请选择部门"
            noOptionsText="请先选择归属公司"
          />
        </el-form-item>
        <el-form-item label="开通时间" prop="openTime">
          <el-date-picker
            v-model="formInline.openTime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item style="padding-left:90px">
          <el-button type="danger" size="min" @click="clearForm" v-no-more-click
            >清空</el-button
          >
          <el-button
            type="primary"
            size="min"
            @click="submitBtn"
            v-no-more-click
            >查询</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="box section_wrap">
      <p class="button">
        <el-button
          @click="exportDept"
          type="primary"
          size="small"
          v-no-more-click
          v-if="userInfoExport"
        >
          +导出</el-button
        >
        <el-upload
          class="upload-demo"
          :action="exportInUrl"
          :headers="parmas"
          :on-progress="showLoading"
          :on-success="closeLoading"
          :show-file-list="false"
          accept=".xlc,.xlm,.xls,.xlt,.xlw"
        >
          <el-button size="small" type="primary" v-no-more-click v-if="userInfoImport"
            >+导入已经发放表</el-button
          >
        </el-upload>
      </p>
      <el-table
        :data="tableData"
        :inline="true"
        border
        style="width: 100%"
        align="center"
        :row-key="getRowKey"
        @selection-change="changeFun"
      >
        <el-table-column
          type="selection"
          :reserve-selection="true"
          width="36"
          class-name="checkBox"
        ></el-table-column>
        <el-table-column
          prop="incomeYear"
          label="收入年份"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="incomeMonth"
          label="收入月份"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="partnerPhone"
          label="合伙人手机电话"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="name"
          label="姓名"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="idCard"
          label="身份证号"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="email"
          label="邮箱"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="teamNum"
          label="团队人数"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="firmName"
          label="所属公司"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="deptName"
          label="所属部门"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="openTime"
          label="开通时间"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="validNum"
          label="有效带单量"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="releasedIncome"
          label="已放款收入"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="partnerBonus"
          label="团队总奖金"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="partnerMoney"
          label="合伙人奖金"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="partnerScale"
          label="合伙人奖金比例"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="issuer"
          label="发放人"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="issueTime"
          label="发放日期"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="issueStatus"
          label="发放状态"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="recentlyLoginTime"
          label="最近登录"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="updateTime"
          label="更新时间"
          :show-overflow-tooltip="true"
        />
        <el-table-column fixed="right" label="操作" width="80">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="lookUp(scope.row)"
              v-no-more-click
              >查看</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!--分页控件-->
      <div class="pagination">
        <span class="title">小计：共{{ this.formInline.total }}条数据</span>
        <el-pagination
          background
          layout="total,prev, pager, next"
          :total="formInline.total"
          :page-size="formInline.pagesize"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        >
        </el-pagination>
      </div>
    </div>

    <el-dialog
      title="合伙人奖金查看"
      :visible.sync="dialogVisible"
      width="800px"
      top="30px"
      @close="closeDia"
    >
      <PartnerDia :diaId="diaId" v-if="dialogVisible"></PartnerDia>
    </el-dialog>
  </div>
</template>

<script>
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { GMTToStr, expotOut,checkPermiss } from "@/assets/js/utlis";
import {
  pagelist,
  getDepartment,
  getPartnerList
} from "../../../src/assets/js/api";
import PartnerDia from "@/components/user/PartnerDia";
export default {
  name: "Partner",
  components: { Treeselect, PartnerDia },
  data() {
    return {
      normalizer(node) {
        //去掉children=[]的children属性
        if (node.children == null) {
          delete node.children;
        }
      },
      exportInUrl: "",
      parmas: {
        COOKIE_TOKEN: ""
      },
      formInline: {
        keyWord: null,
        incomeMonth: null,
        beginTeamNum: null,
        endValidNum: null,
        beginValidNum: null,
        endTeamNum: null,
        loginTime: null,
        firmId: null,
        deptId: null,
        openTime: null,
        pagesize: 10,
        pageNo: 1,
        total: 10
      },
      companyData: [],
      deptData: [],
      tableData: [],
      dialogVisible: false,
      diaId: null,
      orderExportId: [],
      golbalPermissions:[]
    };
  },
  created() {
    this.golbalPermissions = localStorage.getItem("permissions").split(",");
    this.exportInUrl = `${this.axios.defaults.baseURL}/business/partnerData/exportImport`;
    //获取token
    let token = localStorage.getItem("token");
    this.parmas.COOKIE_TOKEN = token;
    this.querryData();
    this.companylist();
    this.getPartnerList();
  },
  computed:{
//导出按钮权限!
    userInfoExport: function () {
      return checkPermiss("business:partnerData:export", this.golbalPermissions);
    },
    //导入已经发放表权限!
    userInfoImport: function () {
      return checkPermiss("business:partnerData:exportImport", this.golbalPermissions);
    },
  },
  methods: {
    // 归属公司
    companylist() {
      pagelist().then(res => {
        this.companyData = res.data;
      });
    },
    // 通过选中公司id查询部门
    companyChange(val) {
      this.formInline.firmId = val;
      this.formInline.deptId = null;
      getDepartment(val).then(res => {
        this.deptData = res.data;
      });
    },
    // 获取部门id
    handleNodeClick(data) {
      this.formInline.deptId = data.id;
    },
    //查看按钮
    lookUp(obj) {
      this.dialogVisible = true;
      this.diaId = obj.id;
    },
    //公共方法获取分页数据
    getPartner(obj) {
      getPartnerList(obj).then(res => {
        this.tableData = res.data.records;
        this.formInline.total = res.data.total;
      });
    },
    //获取tablist数据分页
    getPartnerList() {
      let querryData = this.querryData();
      this.getPartner(querryData);
    },
    //分页
    handleCurrentChange(cpage) {
      let querryData = this.querryData();
      querryData.pageNo = cpage;
      this.getPartner(querryData);
    },
    handleSizeChange(psize) {
      let querryData = this.querryData();
      querryData.pageNo = psize;
      this.getPartner(querryData);
    },
    closeDia() {
      this.dialogVisible = false;
      this.diaId = null;
    },
    //整理查询的数据
    querryData() {
      let querryData = JSON.parse(JSON.stringify(this.formInline));
      if (querryData.incomeMonth && querryData.incomeMonth[0]) {
        querryData.beginIncomeMonth = GMTToStr(querryData.incomeMonth[0]);
        querryData.endIncomeMonth = GMTToStr(querryData.incomeMonth[1]);
      }
      if (querryData.loginTime && querryData.loginTime[0]) {
        querryData.beginLoginTime = GMTToStr(querryData.loginTime[0]);
        querryData.endLoginTime = GMTToStr(querryData.loginTime[1]);
      }
      if (querryData.openTime && querryData.openTime[0]) {
        querryData.beginOpenTime = GMTToStr(querryData.openTime[0]);
        querryData.endOpenTime = GMTToStr(querryData.openTime[1]);
      }
      delete querryData.incomeMonth;
      delete querryData.loginTime;
      delete querryData.openTime;
      return querryData;
    },
    //查询按钮
    submitBtn() {
      let querryData = this.querryData();
      getPartnerList(querryData).then(res => {
        this.tableData = res.data.records;
        this.formInline.total = res.data.total;
      });
    },
    //清空按钮
    clearForm() {
      this.$refs.formInline.resetFields();
      this.formInline.incomeMonth = null;
      this.formInline.loginTime = null;
      this.formInline.openTime = null;
      this.submitBtn();
    },
    // 批量
    getRowKey(row) {
      return row.id;
    },
    changeFun(val) {
      this.orderExportId = val.map(item => item.id);
    },
    //导出
    exportDept() {
      let fileParmas = JSON.parse(JSON.stringify(this.formInline));
      delete fileParmas.pagesize;
      delete fileParmas.total;
      delete fileParmas.pageNo;
      if (this.orderExportId) {
        fileParmas.idList = this.orderExportId;
      } else {
        fileParmas.idList = null;
      }
      expotOut(
        "post",
        "/business/partnerData/export",
        fileParmas, // 导出请求参数
        "合伙人奖金信息列表" // 导出文件名字
      );
    },
    //点击选择文件触发的事件，触发input的click事件
    exportIn() {
      this.$refs.fileBtn.dispatchEvent(new MouseEvent("click"));
    },
    //上传文件
    showLoading() {
      this.loading(true);
    },
    closeLoading(file) {
      this.loading(false);
      this.$message.success(file.message);
    },
    //遮罩函数
    loading(status) {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      if (!status) {
        loading.close();
      }
    }
  }
};
</script>

<style scoped lang="less">
.box
{
    p
    { display: flex;
 margin-top: 10px;  padding: 5px 10px; 

        text-align: left; 
    }
}
.upload-demo
{
    margin-left: 15px;
}
::v-deep .el-table td,
::v-deep .el-table th
{
    text-align: center;
}
.el-select
{
    width: 100%;
}
.title
{ font-family: Microsoft YaHei;  font-size: 12px;  font-weight: 400;  line-height: 21px;

    position: absolute;  left: 0;  margin-top: 15px;  color: rgba(51, 51, 51, 1); 
}
::v-deep .el-pagination
{
    position: absolute;  right: 0;
 margin-top: 20px; 
}
.query_wrap ::v-deep.el-form-item,
.query_wrap ::v-deep.el-form-item__label,
.query_wrap ::v-deep.el-form-item__content,
.query_wrap ::v-deep.el-input__inner
{ line-height: 32px;

    height: 32px; 
}
.query_wrap ::v-deep.el-date-editor,
.query_wrap ::v-deep.el-input__inner,
.query_wrap ::v-deep.el-form-item__content
{
    width: 210px;
}
.query_wrap ::v-deep.vue-treeselect__control
{ line-height: 30px;

    height: 30px; 
}
.query_wrap ::v-deep.vue-treeselect__placeholder
{
    line-height: 30px;
}
.query_wrap ::v-deep.el-form-item,
.query_wrap .ts_wrap,
.query_wrap .ts_wrap .span
{
    float: left;
}
.query_wrap .ts_wrap .span
{
    margin: 0 5px;
}
.query_wrap .ts_wrap
{
    line-height: 32px;
}
.query_wrap ::v-deep.el-form-item
{
    margin-right: unset;  margin-bottom: 15px;
}
.query_wrap ::v-deep.el-input__icon,
.query_wrap ::v-deep .el-range-separator
{
    line-height: 24px;
}
.query_wrap .min ::v-deep.el-input__inner,
.query_wrap .min ::v-deep.el-form-item__content
{
    width: 92px;
}
.query_wrap .el-button
{
    padding: 8px 20px;
}

</style>
